---
title: React + Hanko
sidebar_label: React
keywords: [react]
sidebar_custom_props:
  docCardIconName: react
---

# React

In this guide you will learn how to use the
[hanko-elements](https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md) web components to
add authentication and a user profile to your React application.

## Install dependencies
Install the `@teamhanko/hanko-elements` package:

```shell npm2yarn
npm install @teamhanko/hanko-elements
```

## Add `<hanko-auth>` component

To provide a login interface in your app, use the `<hanko-auth>` web component. To do so, first import the `register`
function from `@teamhanko/hanko-elements` in your React component. Call it with the URL of the Hanko API as an argument to register
the `<hanko-auth>` element with
the browser's [`CustomElementRegistry`](https://developer.mozilla.org/de/docs/Web/API/CustomElementRegistry).
Then use the element in your JSX.

:::info

If you are using [Hanko Cloud](https://cloud.hanko.io), you can find the API URL on your project dashboard.
If you are self-hosting you need to provide the URL of your running Hanko backend.

:::

```jsx title="HankoAuth.jsx" showLineNumbers
import { register } from "@teamhanko/hanko-elements";

const hankoApi = "<YOUR_API_URL>";

export default function HankoAuth() {
  useEffect(() => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }, []);

  return (
    <hanko-auth />
  );
}
```

## Define event callbacks

Use the Hanko client provided by `@teamhanko/hanko-elements` to subscribe to
[events](https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#events).

```jsx title="HankoAuth.jsx" showLineNumbers
import React, { useEffect, useCallback } from "react";
// highlight-next-line
import { useNavigate } from "react-router-dom";
// highlight-next-line
import { register, Hanko } from "@teamhanko/hanko-elements";

// highlight-next-line
const hankoApi = "<YOUR_API_URL>";

export default function HankoAuth() {
  // highlight-next-line
  const navigate = useNavigate();
  // highlight-next-line
  const hanko = useMemo(() => new Hanko(hankoApi), []);

  // highlight-start
  const redirectAfterLogin = useCallback(() => {
    // successfully logged in, redirect to a page in your application
    navigate("...");
  }, [navigate]);
  // highlight-end

  // highlight-start
  useEffect(() => hanko.onAuthFlowCompleted(() => {
    redirectAfterLogin();
  }), [hanko, redirectAfterLogin]);
  // highlight-end

  useEffect(() => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }, []);

  return (
    <hanko-auth />
  );
}
```

## Add `<hanko-profile>` component {#hanko-profile}

To provide a page where users can manage their email addresses, password and passkeys, use the `<hanko-profile>` web
component. Import the `register` function from `@teamhanko/hanko-elements` in
your React component. Call it with the
URL of the Hanko API as an argument to register the `<hanko-profile>` element with the browser's
[`CustomElementRegistry`](https://developer.mozilla.org/de/docs/Web/API/CustomElementRegistry). Then
use the element in your JSX.

```jsx title="HankoProfile.jsx" showLineNumbers
import { useEffect } from "react";
import { register } from "@teamhanko/hanko-elements";

const hankoApi = "<YOUR_API_URL>";

export default function HankoProfile() {
  useEffect(() => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }, []);

  return (
    <hanko-profile />
  );
};
```

## Implement logout

Use the Hanko client provided by `@teamhanko/hanko-elements` to log out users. On logout a custom event is
dispatched that you can subscribe to:

```jsx title="HankoProfile.jsx" showLineNumbers
// highlight-start
import { useEffect, useMemo } from "react";
import { useNavigate } from "react-router-dom";
import { register, Hanko } from "@teamhanko/hanko-elements";
// highlight-end

const hankoApi = "<YOUR_API_URL>";

export default function HankoProfile() {
  // highlight-start
  const navigate = useNavigate();
  const hanko = useMemo(() => new Hanko(hankoApi), []);
  // highlight-end

  // highlight-start
  const logout = () => {
    hanko.user.logout().catch((error) => {
      // handle error
    })
  }
  // highlight-end

  // highlight-start
  const redirectAfterLogout = () => {
    // successfully logged out, redirect to a login page in your application
    navigate("...");
  };
  // highlight-end

  useEffect(() => {
    // register the component
    // see: https://github.com/teamhanko/hanko/blob/main/frontend/elements/README.md#script
    register(hankoApi)
      .catch((error) => {
        // handle error
      });
  }, []);

  // highlight-start
  useEffect(() => hanko.onUserLoggedOut(() => {
    redirectAfterLogout();
  }), [hanko, redirectAfterLogout]);
  // highlight-end

  return (
    <>
      // highlight-next-line
      <button onClick={logout}>Logout</button>
      <hanko-profile />
    </>
  );
};
```

## Customize component styles

The styles of the `hanko-auth` and `hanko-profile` elements can be customized using CSS variables and parts. See our
guide on customization [here](https://github.com/teamhanko/hanko/tree/main/frontend/elements#ui-customization).

## Authenticate backend requests

If you want to authenticate requests in your own backend, please view our [backend guide](/guides/backend).
